<template>
  <div style="background-color: #f5f5f5">
    <product-navbar titleText="交易大厅"  subtitleText="有需求、找资源、寻合作,平台致力于为供、需双方提供一个流畅、专业的需求对接交互平台"/>
    <product-select type="jydt"></product-select>

    <!-- 交易大厅列表 -->
    <div class="list-container">
      <!-- 列表表格 -->
      <el-table
          :data="paginatedData"
          style="width: 100%"
          header-row-class-name="table-header"
      >
        <el-table-column
            prop="publishTime"
            label="发布时间"
            width="180"
        >
          <template #default="{row}">
            <span>{{ formatDate(row.publishTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="content"
            label="需求内容"
        >
          <template #default="{row}">
            <div class="content-cell">
              <div class="content-title">{{ row.title }}</div>
              <div class="content-desc">{{ row.content }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="publisher"
            label="需求发布方"
            width="100"
        >
          <template #default="{row}">
            <div class="publisher-cell">
              <span style="margin-left: 10px">{{ row.publisher }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="budget"
            label="预算"
            width="100"
            align="right"
        >
          <template>
<!--            <span class="budget">¥{{ row.budget }}万</span>-->
            <span>{{ '面议' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="120"
        >
          <template #default="{row}">
            <div class="status-cell">
              <span class="status-dot" :class="getStatusClass(row.status)"></span>
              <span class="status-text">{{ row.status }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ProductNavbar from "@/view/productEmpowerment/model/productNavbar.vue";
import ProductSelect from "@/view/productEmpowerment/model/productSelect.vue";
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  components: {ContactFooter, ProductSelect, ProductNavbar},
  data() {
    return {
      tableData: [
        {
          publishTime: '2023-05-15T09:30:00',
          title: '寻找电商平台开发团队',
          content: '需要开发一个B2C电商平台，包含商品管理、订单管理、支付接口等功能，要求有类似项目经验。',
          publisher: '某零售企业',
          avatar: 'https://example.com/avatar1.jpg',
          budget: 50,
          status: '进行中'
        },
        {
          publishTime: '2023-05-14T14:20:00',
          title: '企业官网改版设计',
          content: '现有企业官网需要重新设计改版，要求响应式布局，符合公司品牌形象。',
          publisher: '某科技公司',
          avatar: 'https://example.com/avatar2.jpg',
          budget: 15,
          status: '进行中'
        },
        {
          publishTime: '2023-05-13T11:10:00',
          title: '移动App UI/UX设计',
          content: '需要为我们的新产品设计移动App界面，要求简洁现代，用户体验优秀。',
          publisher: '某创业团队',
          avatar: 'https://example.com/avatar3.jpg',
          budget: 30,
          status: '进行中'
        },
        {
          publishTime: '2023-05-12T16:45:00',
          title: '数据分析系统开发',
          content: '开发一个数据分析系统，能够处理大量数据并生成可视化报表。',
          publisher: '某金融机构',
          avatar: 'https://example.com/avatar4.jpg',
          budget: 80,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        },
        {
          publishTime: '2023-05-11T10:15:00',
          title: '品牌logo设计',
          content: '为我们的新品牌设计logo，要求简洁有辨识度，符合行业特性。',
          publisher: '某食品公司',
          avatar: 'https://example.com/avatar5.jpg',
          budget: 5,
          status: '进行中'
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 12
    }
  },
  computed: {
    // 计算分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    getStatusClass(status) {
      const statusMap = {
        '待接单': 'waiting',
        '进行中': 'processing',
        '已完成': 'completed',
        '已取消': 'canceled'
      };
      return statusMap[status] || '';
    },
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 1 ? 'even-row' : 'odd-row';
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置到第一页
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    fetchData() {
      // 这里应该是API请求获取数据
      console.log(`Fetching data: page=${this.currentPage}, size=${this.pageSize}`);
      // 模拟API请求
      // this.$api.getTradeList({ page: this.currentPage, size: this.pageSize }).then(res => {
      //   this.tableData = res.data;
      //   this.total = res.total;
      // });
    }
  }
}
</script>

<style scoped>
.list-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 表头样式 */
:deep(.table-header th) {
  background-color: #fff !important;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 600;
  color: #333;
}

/* 表格行样式 */
:deep(.el-table .odd-row) {
  background-color: #fff;
}

:deep(.el-table .even-row) {
  background-color: #fafafa;
}

/* 内容单元格样式 */
.content-cell {
  padding: 8px 0;
}

.content-title {
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
}

.content-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 发布方单元格样式 */
.publisher-cell {
  display: flex;
  align-items: center;
}

/* 预算样式 */
.budget {
  font-weight: 600;
  color: #ff6600;
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
  padding-right: 10px;
}
.status-cell {
  display: flex;
  align-items: center;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-dot.waiting {
  background-color: #e6a23c; /* 待接单 - 橙色 */
}

.status-dot.processing {
  background-color: #67c23a; /* 进行中 - 蓝色 */
}

.status-dot.completed {
  background-color: #67c23a; /* 已完成 - 绿色 */
}

.status-dot.canceled {
  background-color: #909399; /* 已取消 - 灰色 */
}

.status-text {
  font-size: 13px;
  color: #67c23a;
}
</style>